﻿<style type="text/css">
    .mv-content{margin-top: 0px;}
    .financial-top{background: #ec603b;overflow: hidden;position:fixed;width:100%;top:0px;left:0px;}
    .mv-head1{height: 50px;text-align: center;line-height: 50px;position: relative;}
    .mv-head1 h2{font-size: 16px;display: inline-block;color: #fff}
    .mv-head1 a{font-size: 16px;display: inline-block;height: 40px;color: #fff}
    .mv-head1 a span{color: #fff}
    .mv-head1 a i{font-size: 23px;margin-left: 8px;position: relative;top: 1px;}
    .mv-head1 .head1-left{position: absolute;left: 0px;}
    .mv-head1 .head1-right{position: absolute;right: 15px;}

    .top-data{padding-top: 20px;padding-bottom: 20px;}
    .top-data p{text-align: center;color: #fff;}
    .top-data p:nth-of-type(1){color:#f5bdad }
    .top-data p:nth-of-type(2){font-size: 25px;padding-top: 10px;padding-bottom: 20px;}
    .top-class{overflow: hidden;background: #ec6843;padding-top:15px;padding-bottom: 15px; }
    .top-class li{width: 33.32%;text-align: center;float: left;}
    .top-class li p{color: #fff}
    .top-class li p:nth-of-type(1){color:#f5bdad }

    .coin-change{text-align: center;position: fixed;bottom: 0px;width: 100%;border-top: 1px solid #f5f5f5}
    .coin-change a{color: #fff;display: inline-block;width: 50%; padding:10px 0px; font-size: 16px;}
    .coin-change .change-a{background:#fff;color: #a8a8a8}
    .coin-change .change-b{background: #3d70f6}
</style>
<div class="financial-top">
    <div class="mv-head1">
        <h2 v-text="bag.title">-</h2>
        <a class="head1-left" v-on:click="back">
            <i class="iconfont icon-fanhui1"></i>
            <span>返回</span>
        </a>
        <a class="head1-right">
        </a>
    </div>
    <div class="top-data">
        <p>可用余额(<label v-text="bag.typename">-</label>)</p>
        <p v-text="bag.selfinfo.amount">-</p>
    </div>
    <div class="top-class">
        <ul>
            <li>
                <p>
                    累计收益
                </p>
                <p><label v-text="bag.selfinfo.total">-</label></p>
            </li>
            <li>
                <p>
                    结息周期
                </p>
                <p v-if="bag.cycle > 0"><label v-text="bag.cycle+'日'">-</label></p>
                <p v-if="bag.cycle <= 0"><label>活期</label></p>
            </li>
            <li>
                <p>
                    可赎数量
                </p>
                <p><label v-text="bag.selfinfo.free">-</label></p>
            </li>
        </ul>
    </div>
</div>
<div class="mv-list-image" style="margin-top:265px;">
    <ul>
        <li v-for="data in bag.datas">
            <a>
                <div class="list-content">
                    <div class="list-right">
                        <div class="right-a">
                            <h2 v-text="data.typename">-</h2>
                            <p class="list-time" v-text="data.addtime">-</p>
                        </div>
                        <div class="right-b price-plus" v-text="data.amount"></div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>
<div style="text-align:center;margin-top:0.5em;" v-if="bag.dataend == false">
    <a v-on:click="more" v-text="morename" style="color:#888;">-</a>
</div>
<div style="text-align:center;margin-top:0.5em;" v-if="bag.dataend == true">
    <a style="color:#aaa;">已显示所有</a>
</div>
<div style="height:60px;"></div>
<div class="coin-change">
    <a class="change-a" v-on:click="withdraw">赎回</a><a class="change-b" v-on:click="invest">转入</a>
</div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_FINANCING_DETAIL",
            id: mview.view.chlid.param.id,
            page: 0,
        },
        screen: {
            header_display: false,
            footer_display: false
        },
        data: {
            morename: "查看更多"
        },
        methods: {
            back: function () {
                mview.view.back();
            },
            invest: function (id) {
                mview.view.load('/views/module/financing/invest.html', {
                    id: mview.view.chlid.param.id
                });
            },
            repeat: function (id) {
                mview.view.load('/views/module/financing/repeat.html', {
                    id: mview.view.chlid.param.id
                });
            },
            withdraw: function (id) {
                mview.view.load('/views/module/financing/withdraw.html', {
                    id: mview.view.chlid.param.id
                });
            },
            //加载更多
            more: function () {
                pagedata.request.page += 1;
                mview.socket.send({
                    data: {
                        method: "VIEW_FINANCING_DETAIL",
                        id: pagedata.request.id,
                        page: pagedata.request.page,
                        part: 1
                    },
                    success: function (json) {
                        if (json.Code == 0 && json.Data.datas.length > 0) {
                            for (var i in json.Data.datas) {
                                var data = json.Data.datas[i];
                                mview.vue.stage.$data.bag.dataend = json.Data.dataend;
                                mview.vue.stage.$data.bag.datas.push(data);
                            }
                        }
                    }
                });
            }
        }
    }
    mview.view.chlid.init(pagedata); 
</script>